<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <WeatherHeader />
      </el-header>
      <el-main>
        <RouterView />
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import WeatherHeader from "@/components/WeatherHeader.vue";
</script>

<style lang="scss" scoped>
.common-layout {
  height: 100vh;
  width: 100vw;
  display: flex;
  --tw-bg-opacity: 1;
  background-color: rgb(0 102 138 / var(--tw-bg-opacity));

  .el-header {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    z-index: 10;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
  }
  .el-main {
    flex: 1;
    margin: 0 auto;
    color: white;
  }
}
</style>
